<template>
  <div class="MusicMenuAdmin">
    <div class="addmenu" @click="addMenuIcon">添加歌单</div>
    <el-collapse
      class="collapse"
      v-model="activeNames"
      @change="handleChange"
      :accordion="true"
    >
      <el-collapse-item
        :name="index"
        v-for="(item, index) in menuList"
        :key="index"
      >
        <template #title>
          <span style="margin-left: 10px"><span > {{ item.musicListName }}</span><span style="width: 200px;    position: absolute;
    left: 150px;" >歌单id:{{item.id}}</span></span>
          <div class="collapse_event">
            <img :src="baseURL + item.musicListImg" class="cover" />
            <div class="delect" @click="deleteMusic(index)">删除歌单</div>
          </div>
        </template>
        <div class="list">
          <div class="item" v-for="(item2, index2) in songList" :key="index2">
            <div class="item2" v-for="(item3, index3) in item2" :key="index3">
              {{ index3 }}: {{ item3 }}
            </div>
            <div class="item2">
              <div class="delectSong" @click="detelebymusicBysongIdApi(index,index2)">删除</div>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-dialog title="添加歌单" v-model="dialogVisible" width="30%">
      <div style="display: flex; align-items: center; justify-content: center">
        <el-upload
          class="avatar-uploader"
          :action="baseURL + '/file/upload'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          name="files"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>

      <el-input
        class="input"
        v-model="musicListName"
        placeholder="请输入歌单名称"
      ></el-input>
      <el-button type="primary" style="margin-top: 10px" @click="addMenu"
        >添加
      </el-button>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import {
  getmusiclist,
  getbymusiclistByid,
  deletemusiclistByid,
  insertMenu,
  detelebymusicBysongId,
} from "@/api/song";
import { baseURL } from "../../api/request";

export default {
  setup() {
    const state = reactive({
      activeNames: ["1"],
      menuList: [{ musicListName: "", id: 0, musicListImg: "" }],
      songList: [{ musicAuthor: "", musicName: "", musicUrl: "",id:0 }],
      dialogVisible: false,
      musicListName: "",
      imageUrl: "",
      baseURL: "",
      uploadOkUrl: "",
    });
    //获取歌单歌曲列表
    const handleChange = (val: any) => {
      getbymusiclistByid({ id: state.menuList[val].id }).then((res: any) => {
        state.songList = res.data;
        console.log(state.songList);
      });
    };
    //删除歌单
    const deleteMusic = (index: number) => {
      console.log(index);
      deletemusiclistByid({ id: state.menuList[index].id }).then((res: any) => {
        state.menuList.splice(index, 1);
      });
    };
    //添加歌单
    const addMenuIcon = () => {
      state.dialogVisible = true;
    };
    //添加歌单
    const addMenu = () => {
      let form = new FormData();
      form.append("musicListName", state.musicListName);
      form.append("musicListImg", state.uploadOkUrl);
      insertMenu(form).then((res) => {
        state.dialogVisible = false;
        getmusiclistApi();
      });
    };
    //封面上传成功
    const handleAvatarSuccess = (res: any, file: any) => {
      state.imageUrl = URL.createObjectURL(file.raw);
      state.uploadOkUrl = res.data[0].url;
    };
    //删除歌单具体的歌曲
    const detelebymusicBysongIdApi = (musicListId: number, musicId: number) => {
      let form = new FormData();
      form.append("musicListId", "" + state.menuList[musicListId].id);
      form.append("musicId", "" + state.songList[musicId].id);
      detelebymusicBysongId(form).then((res: any) => {
        state.songList.splice(musicId, 1);
      });
    };
    //获取全部歌单
    const getmusiclistApi = () => {
      getmusiclist({}).then((res: any) => {
        state.menuList = res.data;
        console.log(res);
      });
    };
    onMounted: {
      getmusiclistApi();
      state.baseURL = baseURL;
    }
    return {
      ...toRefs(state),
      handleChange,
      deleteMusic,
      addMenu,
      handleAvatarSuccess,
      addMenuIcon,detelebymusicBysongIdApi
    };
  },
  components: {},
};
</script>
<style lang="less" scoped>
.MusicMenuAdmin {
  width: 100%;
height: 85%;
overflow-y: scroll;
  .list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    .item {
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid #ccc;
      .item2 {
        flex: 1;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        white-space: pre-wrap;
        word-wrap: break-word;
        .delectSong {
          height: 25px;
          width: 60px;
          background-color: red;
          border-radius: 5px;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 50px;
        }
      }
    }
  }
  .avatar-uploader {
    width: 100px;
    height: 100px;
    border: 1px #000 dashed;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 5px;
  }
  .addmenu {
    height: 30px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background-color: blue;
    color: #fff;
    border-radius: 5px;
    margin: 10px;
  }
  .input {
    margin-top: 5px;
  }
  .collapse {
    width: 80%;
    position: relative;
  }
  .collapse_event {
    position: absolute;
    display: flex;
    width: 90%;
    align-items: center;
    justify-content: center;
    .cover {
      position: absolute;
      right: 100px;
      height: 40px;
      width: 40px;
    }
    .delect {
      position: absolute;
      right: 0px;
      color: red;
      z-index: 99;
    }
  }
}
</style>